<template>
  <div class='container'>
    <el-row>
      <el-col>
        <el-card>
          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">
            <el-row>
              <!--              <el-form class="form" label-width="100px" :model="logParams">-->
              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="账号:">-->
              <!--                    <el-input v-model="logParams.account" size="mini" placeholder="请输入账号"></el-input>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->

              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="所属:">-->
              <!--                    <el-select v-model="logParams" placeholder="请选择" style="width:100%">-->
              <!--                      <el-option-->
              <!--                        v-for="item in goodsType"-->
              <!--                        :key="item.value"-->
              <!--                        :label="item.label"-->
              <!--                        :value="item.value">-->
              <!--                        <span style="float: left">{{ item.label }}</span>-->
              <!--                      </el-option>-->
              <!--                    </el-select>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->

              <!--                <el-col :span="8">-->
              <!--                  <el-form-item>-->
              <!--                    <el-button @click="submitSearch()">搜索</el-button>-->
              <!--                    <el-button @click="clearListSearch">重置</el-button>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <!--              </el-form>-->
            </el-row>

            <div class="table-wrapper">
              <el-table
                :data="logList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
              >

                <el-table-column
                  prop="createTime"
                  label="提交时间"
                  align='center'
                  width="100"
                >
                </el-table-column>
                <el-table-column
                  prop="userId"
                  label="用户名"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="联系方式"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="email"
                  label="邮箱"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="opinion"
                  label="反馈内容"
                  align='center'>
                </el-table-column>
                <el-table-column
                  label="截图"
                  align='center'>
                  <template slot-scope='scope'>
                    <img :src="scope.row.img" width="40%">
                  </template>
                </el-table-column>
                <el-table-column
                  align='center'
                  label="操作">
                  <template slot-scope='scope'>
                    <el-button
                      v-if="scope.row.isHandle === 0"
                      type="text"
                      size="mini"
                      @click="showDialog(1,scope.row)"
                    >
                      处理
                    </el-button>
                    <el-button
                      v-if="scope.row.isHandle === 1"
                      type="text"
                      size="mini"
                      @click="showDialog(2,scope.row)"
                    >
                      查看处理结果
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="isHandle"
                  label="状态"
                  align='center'>
                  <template slot-scope='scope'>
                    <span v-if="scope.row.isHandle === 1">已处理</span>
                    <span v-if="scope.row.isHandle === 0">未处理</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

        </el-card>
      </el-col>
    </el-row>

    <!-- 提示框 -->
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" width="40%">
      <el-form :model="logParams" v-if="num == 1">
        <el-row>
          <el-col>
            <el-col>
              <el-form-item label="处理描述">
                <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入"
                  v-model="logParams.des"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-button type="primary" @click="doOpinion()">提交</el-button>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <el-row v-if="num == 2">
        <el-col>
          处理结果：{{logParams.des}}
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import bread from '../../common/bread'
import pagination from '../../common/pagination'
import { formatDate } from 'src/utils/utils'
import { MessageBox } from 'element-ui'
import { opinionList, doOpinion } from '../../api/api'


export default {
  data () {
    return {
      logParams: {
        pageNum: 1,
        pageSize: 10,
        des: '',
        userId: sessionStorage.getItem('userId'),
        id: ''
      },
      logList: [],
      pageTotal: 0,
      dialogVisible: false,
      num: ''
    }
  },
  mounted () {
    this.getLogList()
  },
  methods: {
    getLogList () {
      const para = Object.assign({}, this.logParams)
      opinionList(para).then(res => {
        console.log(res)
        this.logList = res.data.list
        this.pageTotal = res.data.pageTotal
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.logParams.pageNum = val
      this.getLogList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.logParams.pageSize = val
      this.getLogList()
    },
    // 格式化表单数据
    clearForm () {
      this.logParams = {
        pageNum: 1,
        pageSize: 10,
        des: '',
        userId: sessionStorage.getItem('userId'),
        id: ''
      }
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
    },
    showDialog (num, row) {
      this.clearForm()
      this.dialogVisible = true
      this.num = num
      if (num === 1) {
        console.log(row)
        this.logParams.id = row.id
      } else {
        this.logParams.des = row.des
      }
    },
    doOpinion () {
      if (this.logParams.des === '') {
        MessageBox.alert('内容不能为空', '提示', {
          confirmButtonText: '确定',
          showClose: false,
          type: 'error'
        })
        this.dialogVisible = false
      } else {
        const para = Object.assign({}, this.logParams, {
          isHandle: 1
        })
        doOpinion(para).then(res => {
          console.log(res)
          this.dialogVisible = false
          this.getLogList()
        })
      }
    },
    formatDate (row, column) {
      let date = row[column.property]
      date = new Date(date)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    bread,
    pagination
  }
}
</script>
<style lang='scss'>
  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }
  }
</style>
